<template>
 <!-- <el-tooltip placement="top" :disabled="item.tips===null">
    <div v-if="item.tips!=null&&item.type!='upload'" slot="content">{{item.tips}}</div>-->
    <div class="form-item">
      <!--文本类型 text-->
      <span v-if="item.editType==='text'">{{curDatas[item.fieldCode]}}{{$isEmpty(item.unit)?'':item.unit}}</span>

      <!--表达式类型 text-->
      <span v-if="item.editType==='expression'">{{toCalculate(item.expression)}}{{$isEmpty(item.unit)?'':item.unit}}</span>

      <!--输入框 input-->
      <el-input v-else-if="item.editType==='input'"
                v-model="curDatas[item.fieldCode]"
                :placeholder="item.placeholder" clearable>
        <template v-if="!$isEmpty(item.unit)" slot="append">{{item.unit}}</template>
      </el-input>

      <!--文本域 text-->
      <el-input v-else-if="item.editType==='textarea'"
                type="textarea"
                v-model="curDatas[item.fieldCode]"
                :placeholder="item.placeholder">
      </el-input>


      <!--单选框 radio-->
      <el-radio-group v-else-if="item.editType==='radio'"
                      v-model="curDatas[item.fieldCode]" size="small">
        <el-radio v-for="option in item.options"
                  :key="option.value"
                  :label="option.value">
          {{option.label}}
        </el-radio>
      </el-radio-group>

      <!--switch 开关-->
      <el-switch v-else-if="item.editType==='switch'"
                 v-model="curDatas[item.fieldCode]"
                 :active-text="item.activeText"
                 :inactive-text="item.inactiveText">
      </el-switch>

      <!--多选框 checkbox-->
      <el-checkbox-group v-else-if="item.editType==='checkbox'"
                         v-model="curDatas[item.fieldCode]"
                         size="small"
                         :min="item.min"
                         :max="item.max">
        <component :is="item.style===''||item.style===undefined?'el-checkbox' : 'el-checkbox-'+item.style"
                   v-for="option in item.options"
                   :key="option.value"
                   :label="option.value">
          {{option.label}}
        </component>
      </el-checkbox-group>

      <!--下拉框 select-->
      <el-select v-else-if="item.editType==='select'"
                 v-model="curDatas[item.fieldCode]"
                 :placeholder="item.placeholder"
                 :multiple="item.multiple">
        <el-option v-for="option in item.options"
                   :key="option.value"
                   :label="option.label"
                   :value="option.value">
        </el-option>
      </el-select>

      <!--级联选择器 cascader-->
      <el-cascader v-else-if="item.editType==='cascader'"
                   :options="item.options"
                   filterable
                   v-model="curDatas[item.fieldCode]">
      </el-cascader>

      <!--时间 time-->
      <el-time-picker v-else-if="item.editType==='time'"
                      v-model="curDatas[item.fieldCode]"
                      :type="item.editType"
                      :placeholder="item.placeholder"
                      :format="item.format"
                      :value-format="item.valueFormat">
      </el-time-picker>

      <!--时间范围 timerange-->
      <el-time-picker v-else-if="item.editType==='timerange'"
                      v-model="curDatas[item.fieldCode]"
                      is-range
                      start-placeholder="开始时间"
                      end-placeholder="结束时间"
                      :format="item.format"
                      :value-format="item.valueFormat">
      </el-time-picker>

      <!--日期 date/daterange/datetime/datetimerange-month/year/dates/year/month-->
      <el-date-picker v-else-if="['date','daterange','datetime','datetimerange','year','month'].includes(item.editType)"
                      v-model="curDatas[item.fieldCode]"
                      :type="item.editType"
                      :placeholder="item.placeholder"
                      start-placeholder="开始时间"
                      end-placeholder="结束时间"
                      :format="dataFormat[item.editType]"
                      :value-format="dataFormat[item.editType]">
      </el-date-picker>

      <!--上传文件 upload-->
      <el-upload v-else-if="item.editType==='upload'"
                 action="/zftal-xgxt-web/filemgr/file/upload.zf"
                 :accept="item.accept"
                 :file-list="files"
                 :limit="item.limit"
                 :before-upload="beforeAvatarUpload"
                 :on-success="handleSuccess"
                 :on-error="handleError"
                 :before-remove="handleRemove"
                 :on-preview="handlePreview"
                 list-type="picture">
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">{{item.tips}}</div>
      </el-upload>

      <!--评分 Rate -->
      <el-rate v-else-if="item.editType==='rate'"
               v-model="curDatas[item.fieldCode]"
               :show-score="item.showScore"
               :show-text="item.showText"
               score-template="{value}">
      </el-rate>

    </div>
<!--  </el-tooltip>-->
</template>
<script>
export default {
  name: "FormItemEdit",
  props: ["item", "curDatas"],
  data() {
    return {
      valueDatas: {},
      dataFormat: {
        date: "yyyy-MM-dd",
        daterange: "yyyy-MM-dd",
        datetime: "yyyy-MM-dd HH:mm",
        datetimerange: "yyyy-MM-dd HH:mm",
        year: "yyyy",
        month: "yyyy-MM"
      },
      files: []
    };
  },
  watch: {
    curDatas: {
      handler(curVal) {
        this.$emit("update:curDatas", curVal);
      },
      deep: true
    }
  },
  mounted: function() {
    this.$nextTick(function() {
      this.uploadFiles(this.item);
    });
  },
  methods: {
    uploadFiles(item) {
      if (item.editType == "upload" && !this.$isEmpty(item.defaultValue)) {
        let uid = item.defaultValue.split(",");
        let name = item.defaultLabel.split(",");
        for (let [i, elem] of uid.entries()) {
          this.setFiles(name[i], elem);
        }
      }
    },
    setFiles(name, uid) {
      let type = name.split(".").pop();
      let url = ["bmp", "jpg", "jpeg", "png", "gif"].includes(type)
        ? "/zftal-xgxt-web/filemgr/file/preview.zf?uid=" + uid
        : "/static/img/" + type + ".png";
      this.files.push({ url: url, uid: uid, name: name });
    },
    //上传图片过滤
    beforeAvatarUpload(file) {
      //consol.log(item.limit);
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("上传文件大小不能超过 2MB!");
      }
    },
    handleSuccess(res) {
      if (res.code === 0) {
        this.$message.success("上传成功！");
        let data = res.data;
        this.curDatas[this.item.fieldCode].push(data.uid);
        this.setFiles(data.fileName, data.uid);
      } else {
        this.$message.warning(res.msg);
      }
    },
    handleRemove(file) {
      let uid = file.hasOwnProperty("response")
        ? file.response.data.uid
        : file.uid;
      let params = this.$qs.stringify({
        uid: uid
      });
      this.$http
        .post("/zftal-xgxt-web/filemgr/file/delete.zf", params)
        .then(res => {
          this.$message.success(res.msg);
          this.curDatas[this.item.fieldCode].remove(uid);
          for (let file of this.files) {
            if (file.uid === uid) {
              this.files.remove(file);
            }
          }
        });
    },
    handleError() {
      this.$message.error("上传失败！");
    },
    handlePreview(file) {
      window.open("/zftal-xgxt-web/filemgr/file/preview.zf?uid=" + file.uid);
    },
    toCalculate(expression) {
      let e = expression.replace(/[$]/g, "this.curDatas");
      return eval(e);
    }
  }
};
</script>
